import Link from 'next/link';
import { EnvironmentFilled } from '@ant-design/icons';
import { replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonComponent.module.scss';

export default function ColumnItem({ target, data }) {
    const { goodsName, description, thumbnail, showPrice, price, labels, address } = data;
    return (
        <div className={styles.item}>
            <Link href={target}>
                <a className={styles['image']} target="_blank">
                    <img src={replaceImageUrl(thumbnail)} alt={goodsName} />
                </a>
            </Link>
            {  // 酒店
                target.includes('/hotel') ?
                    <p className={styles.location}>
                        <EnvironmentFilled /> {address}
                    </p> : ""
            }
            <div className={styles['info']}>
                <h3>
                    <Link href={target}>
                        <a target="_blank">{goodsName}</a>
                    </Link>
                </h3>
                <p className={styles.desc} title={`${goodsName} - ${description}`}>{description}</p>
                <div className={styles.labels}>
                    {
                        labels ?
                        labels.map(item => {
                            return <span key={item}>{item}</span>
                        }) : ''
                    }
                </div>
                <p className={styles.price}>
                    ￥<em>{showPrice || price}</em>起
                    <Link href={target}><a target="_blank">查看详情</a></Link>
                </p>
            </div>
        </div>
    )
}